<template>
  <el-card class="order-container">
    <template #header>
      <div class="header">
        <el-row>
          <el-col :span="20" class="lightgreen-box"> <el-input
            style="width: 200px; margin-right: 10px"
            placeholder="请输入人物名或种族"
            v-model="name"
            @change="handleOption"
            size="small"
            clearable
          />
          <el-select @change="handleOption" v-model="attribute" size="small" style="width: 100px; margin-right: 10px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> 
          <el-select @change="handleOption" v-model="serverResourceType" size="small" style="width: 100px; margin-right: 10px">
            <el-option
              v-for="item in serviceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> 
        </el-col>
          <el-col :span="4" class="orange-box">
            <img
            :title="waterStDoc"
            style="height: 27px"
            class="ops1_icon"
            src="https://www.cljj.wiki/team/1.jpg"
            @click="toTeamDetail(1)"
          />
          <img
            :title="fireStDoc"
            style="height: 27px"
            class="ops2_icon"
            src="https://www.cljj.wiki/team/2.jpg"
            @click="toTeamDetail(2)"
          />
          <img
            :title="windStDoc"
            style="height: 27px"
            class="ops3_icon"
            src="https://www.cljj.wiki/team/3.jpg"
            @click="toTeamDetail(3)"
          />
          <img
            :title="darktDoc"
            style="height: 27px"
            class="ops4_icon"
            src="https://www.cljj.wiki/team/4.jpg"
            @click="toTeamDetail(4)"
          />
          <img
            :title="lighttDoc"
            style="height: 27px"
            class="ops5_icon"
            src="https://www.cljj.wiki/team/5.jpg"
            @click="toTeamDetail(5)"
          />
          </el-col>
        </el-row>
        
       
      </div>
    </template>
    <el-table
      v-loading="loading"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :header-cell-style="{'text-align':'center'}"  
      :cell-style="{'text-align':'center'}"
      >
      <el-table-column label="序号" width="70">
        <template  #default='scope'>
           {{(scope.$index+1)+(currentPage-1)*pageSize}}
          </template>
        </el-table-column> 
        <el-table-column
        label="头像"
        width="200"
        >
        <template #default="scope">
          <img  class="tx-cl" style="width: 5vw;cursor: pointer;" :src="scope.row.headImgUrl" alt="头像" @click="toRoleDetaile(scope.row.id)">
        </template>
        
      </el-table-column>
       <el-table-column
        prop="name"
        label="人物"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="属性"
      >
         <template #default='scope'>
          <span v-if="scope.row.roleAttribute == 1">水</span>
          <span v-else-if="scope.row.roleAttribute == 2">火</span>
          <span v-else-if="scope.row.roleAttribute == 3">风</span>
          <span v-else-if="scope.row.roleAttribute == 4">暗</span>
          <span v-else-if="scope.row.roleAttribute == 5">光</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="serverResourceType"
        label="国服/美服"
      >
      <template #default='scope'>
        <span v-if="scope.row.serverResourceType == 1">国服</span>
        <span v-else-if="scope.row.serverResourceType == 0">美服</span>
      </template>
    </el-table-column>
      <el-table-column
        prop="getType"
        label="获取途径"
      >
        <template #default='scope'>
          <span v-if="scope.row.getType == 0">普池</span>
          <span v-else-if="scope.row.getType == 1">限定</span>
          <span v-else-if="scope.row.getType == 2">超限</span>
          <span v-else-if="scope.row.getType == 3">超新星</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="roleAttack"
        label="满级ATK"
      >
      </el-table-column>
            <el-table-column
        prop="roleBlood"
        label="满级HP"
      >
      </el-table-column>
            <el-table-column
        prop="roleDefense"
        label="满级DEF"
      >
      </el-table-column>
        <el-table-column
        prop="roleRace"
        label="种族"
      >
      </el-table-column>
            <el-table-column
        prop="roleRank"
        label="职阶"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="changePage"
    />
  </el-card>
  <!-- <a href="https://beian.miit.gov.cn/" target="_blank">渝ICP备2022007517号-1</a> -->
  <!-- <div class="footer">
    <a href="https://beian.miit.gov.cn/" target="_blank">渝ICP备2022007517号-1</a>
  </div> -->
  <Footer></Footer>
</template>

<script lang='ts'>
import { defineComponent, onMounted,reactive,toRefs } from 'vue'
import { useMessage } from 'naive-ui'
import { IconMyData } from '@/icons'
import { getCljjList,saveClPvUv } from '@/api/user'
import axios from 'axios'
import { useRouter,useRoute} from 'vue-router'
import { encrypt,decrypt } from '@/utils/util'
import Footer from '@/views/home/nav-footer.vue'

export default defineComponent({
  name: 'MyData',
  components: {
    IconMyData,
    Footer
  },
  setup() {
    const nMessage = useMessage()
      const state = reactive({
      loading: false,
      waterStDoc:"版本最强水系队伍配置",
      fireStDoc:"版本最强火系队伍配置",
      windStDoc:"版本最强风系队伍配置",
      darktDoc:"版本最强暗系队伍配置",
      lighttDoc:"版本最强光系队伍配置",
      tableData: [], // 数据列表
      multipleSelection: [], // 选中项
      total: 0, // 总条数
      currentPage: 1, // 当前页
      pageSize: 10, // 分页大小
      name: '', // 人物名
      attribute: "", // 属性
      serverResourceType:"",
      options: [{
        value: "",
        label: '全部'
      }, {
        value: "1",
        label: '水'
      }, {
        value: "2",
        label: '火'
      }, {
        value: "3",
        label: '风'
      }, {
        value: "4",
        label: '暗'
      }, {
        value: "5",
        label: '光'
      }],
      serviceOptions: [{
        value: "",
        label: '国服/美服'
      }, {
        value: "1",
        label: '国服'
      }, {
        value: "0",
        label: '美服'
      }]
    })

    const routes = useRoute()
    onMounted(() => {
       let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
       // 移动端处理
       if(flag != null ){
          router.push({
            name: 'MyError'
          })
       }
      if(routes.query){
        if(routes.query.param){
          const enc = JSON.parse(decrypt(routes.query.param));
          // console.log(routes.query.indexEnc);
          // console.log(decrypt(routes.query.indexEnc));
          //  console.log(enc);
          // console.log(parseInt(enc.currentPage._value+""));

          state.currentPage = parseInt(enc.currentPage+"");
          state.name = enc.name+"";
          state.attribute = enc.attribute+"";
          state.serverResourceType = enc.serverResourceType+"";
        }
      }

       getOrderList();
       savePvUv();
    })

    

    // 获取轮播图列表
    const getOrderList = () => {
      state.loading = true
      let pageNO = state.currentPage
      let pageSize = state.pageSize
      let name = state.name
      let attribute = state.attribute;
      let serverResourceType = state.serverResourceType;
      getCljjList(pageNO,pageSize,name,attribute,serverResourceType).then(res=>{ 
           const data = res.data.data;  
           state.tableData = data.dataList;       
           state.total = data.totalCount;
           state.currentPage = data.pageNumber;
           state.loading = false;      
      })
    }

     // 记录pvuv
    const savePvUv = () => {
        // console.log(router.currentRoute.value);
        // const url = "http://124.221.197.189:8088/index.html#/data";
        const url = "https://www.cljj.wiki/index.html#/data";
        saveClPvUv(url).then();
    }
    
    const handleOption = () => {
      state.currentPage = 1
      getOrderList()
    }

    const changePage = (val) => {
      state.currentPage = val
      getOrderList()
    }
    const handleConfig = (id) => {
      console.log('id', id)
      let params
      if (id) {
        params = [id]
      } else {
        if (!state.multipleSelection.length) {
          console.log('state.multipleSelection', state.multipleSelection.length)
          nMessage.warning('请选择项')
          return
        }
        params = state.multipleSelection.map(i => i.orderId)
      }
      axios.put('/orders/checkDone', {
        ids: params
      }).then(() => {
        nMessage.success('配货成功')
        getOrderList()
      })
    }
    const handleSend = (id) => {
      let params
      if (id) {
        params = [id]
      } else {
        if (!state.multipleSelection.length) {
          nMessage.warning('请选择项')
          return
        }
        params = state.multipleSelection.map(i => i.orderId)
      }
      axios.put('/orders/checkOut', {
        ids: params
      }).then(() => {
        nMessage.success('出库成功')
        getOrderList()
      })
    }

    const handleClose = (id) => {
      let params
      if (id) {
        params = [id]
      } else {
        if (!state.multipleSelection.length) {
          nMessage.warning('请选择项')
          return
        }
        params = state.multipleSelection.map(i => i.orderId)
      }
      axios.put('/orders/close', {
        ids: params
      }).then(() => {
        nMessage.success('关闭成功')
        getOrderList()
      })
    }

  const router = useRouter()

  // 跳转人物详情
  const toRoleDetaile = (id) => {
    const param = encrypt(({
        id: id,
        currentPage:state.currentPage,
        name : state.name,
        attribute : state.attribute,
        serverResourceType : state.serverResourceType
      }))
      if (id) {
          router.push({
            name: 'CreateScreen',
            query: {
              param:param
            },
          })
      } 
    }

    // 跳转最强系队伍配置
    const toTeamDetail = (id) => {
      if (id) {
          router.push({
            name: 'TeamScreen',
            query: {
              id: id
            },
          })
      } 
     
    }

    return {
      ...toRefs(state),
      getOrderList,
      changePage,
      handleOption,
      handleConfig,
      handleSend,
      handleClose,
      toRoleDetaile,
      toTeamDetail
    }
  },
})
</script>
<style scoped>
  .order-container {
    min-height: 100%;
  }
  .el-card.is-always-shadow {
    min-height: 100%!important;
  }
  .ops1_icon{
    margin-right: 5px;
    border-radius: 50%;
    box-shadow: 0px 0px 5px #0084ff;
    background: linear-gradient(#0084ff,#0084ff) left top, linear-gradient(#0084ff,#0084ff) left bottom, linear-gradient(#0084ff,#0084ff) right top, linear-gradient(#0084ff,#0084ff) right bottom;
    background-size: 4px 4px;
    background-repeat: no-repeat;
    cursor: pointer; 
  }
  .ops1_icon:hover {
    background: rgb(184, 224, 250);
    border: 1px solid #0084ff;
  }

  .ops2_icon{
    margin-right: 5px;
    border-radius: 50%;
    box-shadow: 0px 0px 5px #f20505;
    background: linear-gradient(#f20505,#f20505) left top, linear-gradient(#f20505,#f20505) left bottom, linear-gradient(#f20505,#f20505) right top, linear-gradient(#f20505,#f20505) right bottom;
    background-size: 4px 4px;
    background-repeat: no-repeat;
    cursor: pointer; 
  }
  .ops2_icon:hover {
    background: rgb(184, 224, 250);
    border: 1px solid #f20505;
  }
  .ops3_icon{
    margin-right: 5px;
    border-radius: 50%;
    box-shadow: 0px 0px 5px #4dac05;
    background: linear-gradient(#4dac05,#4dac05) left top, linear-gradient(#6ccb23,#6ccb23) left bottom, linear-gradient(#6ccb23,#6ccb23) right top, linear-gradient(#6ccb23,#6ccb23) right bottom;
    background-size: 4px 4px;
    background-repeat: no-repeat;
    cursor: pointer; 
  }
  .ops3_icon:hover {
    background: rgb(184, 224, 250);
    border: 1px solid #4dac05;
  }

  .ops4_icon{
    margin-right: 5px;
    border-radius: 50%;
    box-shadow: 0px 0px 5px #a70cb6;
    background: linear-gradient(#a70cb6,#a70cb6) left top, linear-gradient(#a70cb6,#a70cb6) left bottom, linear-gradient(#a70cb6,#a70cb6) right top, linear-gradient(#a70cb6,#a70cb6) right bottom;
    background-size: 4px 4px;
    background-repeat: no-repeat;
    cursor: pointer; 
  }
  .ops4_icon:hover {
    background: rgb(184, 224, 250);
    border: 1px solid #a70cb6;
  }

  .ops5_icon{
    margin-right: 5px;
    border-radius: 50%;
    box-shadow: 0px 0px 5px #f2be14;
    background: linear-gradient(#f2be14,#f2be14) left top, linear-gradient(#f2be14,#f2be14) left bottom, linear-gradient(#f2be14,#f2be14) right top, linear-gradient(#f2be14,#f2be14) right bottom;
    background-size: 4px 4px;
    background-repeat: no-repeat;
    cursor: pointer; 
  }
  .ops5_icon:hover {
    background: rgb(184, 224, 250);
    border: 1px solid #f2be14;
  }
  /* .tx-cl:hover {
    background: rgb(184, 224, 250);
    border: 1px solid #f2be14;
  } */

  /* 表格鼠标悬浮时的样式（高亮） */
  .tx-cl:hover {
    background: rgb(184, 224, 250);
    border: 1px solid #ffd700;
  }

  .footer {
  /* position: absolute; */
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  line-height: 50px;
  background-color: #f5f5f5;
  text-align: center;
  user-select: none;
}
</style>

